<template>
  <view class="flex-jcsa flex-vcenter" style="padding: 40rpx 0">
    <view v-if="hasCancel" class="btn cancel" @click="emit('cancel')">取消</view>
    <view class="btn confirm" @click="emit('confirm')">确定</view>
  </view>
</template>

<script setup lang="ts">
defineProps({
  hasCancel: {
    type: Boolean,
    defalut: true,
  },
});
const emit = defineEmits(['cancel', 'confirm']);
</script>

<style scoped lang="less">
.btn {
  width: 40%;
  text-align: center;
  padding: 18rpx 0;
  box-sizing: border-box;
  font-size: 34rpx;
  border-radius: 5px;
}
.cancel {
  box-sizing: border-box;
  border: 2rpx solid #0370cc;
  color: #0370cc;
  background-color: #fff;
}
.confirm {
  color: #fff;
  background: linear-gradient(-55deg, #1f7be3, #4ba0e2);
}
</style>
